<template>
  <el-card shadow="never" class="h-full">
    <template #header>
      <div class="flex justify-between h-3">
        <span>消费排行榜</span>
        <el-tag type="primary">全平台</el-tag>
      </div>
    </template>
    <el-skeleton :loading="loading" animated>
      <div v-if="memberConsumeRanking && memberConsumeRanking.length" class="flex flex-col content">
        <div class="flex items-center justify-between text-sm text-gray-600">
          <div>用户信息</div>
          <div>金额</div>
        </div>
        <div
          v-for="(item, index) in memberConsumeRanking"
          :key="index"
          class="flex flex-col text-sm text-gray-700"
        >
          <el-divider border-style="dashed" />
          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <el-avatar :size="20" :src="item.userAvatar || './avatar.png'" />
              <span class="ml-5px">{{ item.userNickname }}</span>
            </div>
            <div>{{ fenToYuan(item.consumePrice) }}元</div>
          </div>
        </div>
      </div>
      <div v-else class="flex items-center justify-center text-gray-600"> 暂无排行数据 </div>
    </el-skeleton>
  </el-card>
</template>
<script lang="ts" setup>
import * as IndexStatisticsApi from '@/api/home'
import { fenToYuan } from '@/utils'

defineOptions({ name: 'MemberConsumeRankingCard' })

const memberConsumeRanking = ref<any>([])

/** 查询排行榜 */
const loading = ref(true) // 加载中
const getRanking = async () => {
  loading.value = true
  try {
    memberConsumeRanking.value = await IndexStatisticsApi.getMemberConsmeRanking()
  } finally {
    loading.value = false
  }
}

/** 初始化 **/
onMounted(async () => {
  await getRanking()
})
</script>

<style scoped>
:deep(.el-divider--horizontal) {
  margin: 10px 0;
}
</style>
